<template>
  <div class="content">
    <div  style="
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
          :append-to-body="true"
    >
      <div class="cover">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <div class="title" v-if="title=='注册企业'">{{title}}</div>
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>
<!--        <div class="cover-middle">-->
<!--          <div class="street">街道/乡镇：-->
<!--            <el-select v-model="value" placeholder="请选择">-->
<!--              <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--          <div class="village">村/社区：-->
<!--            <el-select v-model="value" placeholder="请选择">-->
<!--              <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--        </div>-->
        <div class="cover-bottom">
          <el-table
              :data="tableData"
              style="width: 100%;">
            <el-table-column width="80"
                prop="id"
                label="序号"
                >
            </el-table-column>
            <el-table-column
                prop="enterpriseName"

                label="企业"
                >
            </el-table-column>
            <el-table-column
                prop="enterpriseAddress"

                label="地址"
                >
            </el-table-column>
            <el-table-column width="100"
              prop="legalPersonName"
              label="法人"
              >
          </el-table-column>
          </el-table>
        </div>
        <div class="paging">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.page">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  employersListApi,
} from "@/api/statistics-3";

export default {
  name: "CoverCom",
  props:['id','closeDialog3','title','name'],
  data() {
    return{
      count: 2,
      page: 1,
      limit: 7,
      isShow: true,
      value: '',
      options: [],
      tableData: []
    }
  },
  methods:{
    onCloseDialog()
    {
      this.closeDialog3(0)
    },

    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage',this.page)
      this.getList()
    },
    getList(){
        employersListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
    }
  },
  mounted() {
    this.fairActive = this.id
    this.getList()
  },

}
</script>

<style lang="scss" scoped>
.content{
  .cover{
    position: relative;
    width: 52%;
    min-height: 60vh;
    height:auto;
    background-color: #0A1456;
    border-radius: 15px;
    padding: 20px;
      .cover-top{
        display: flex;
        justify-content: space-between;
        .top-left{
          display: flex;
          .sign{
            background-color: #498CF3;
            width: 10px;
            height: 20px;
            border-radius: 15px;
            margin-right: 15px;
          }
          .title{
            color: #ffffff;
          }
        }
        .top-right{
          color: #2FA1F9;
          font-size: 20px;
          cursor: pointer;
          margin-right: 5px;
        }
      }
    .cover-middle{
      display: flex;
      margin: 20px 0;
      .street{
        color: #ffffff;
        margin-right: 20px;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
      .village{
        color: #ffffff;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
    }
    .cover-bottom{
      width: 100%;
      height: calc(100% - 70px);
      overflow: hidden;
      ::v-deep{
      .el-table th.el-table__cell{
        background-color: rgba(72, 75, 147, 0.5);
        text-align: center;
        color: #fff;
      }
        .el-table tr{
          background-color: #0A1456;
        }
        .el-table .el-table__cell{
          background-color: #0A1456;
          border-bottom: 1px solid #394276;
          text-align: center;
        }
        .el-table .cell{
          color: #fff;
        }
      }
    }
    .paging{
      display: flex;
      justify-content: center;
      margin-top: 10px;
      ::v-deep{
        .el-pagination.is-background .btn-prev{
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-prev span{
          color: #fff;
        }
        .el-pagination.is-background .btn-next{
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-next span{
          color: #fff;
        }
      }
    }
  }
}
</style>
